<template>
  <div>
    <ul>
        <li :style="{opacity}">欢迎学习Vue</li>
        <li>news001</li><input type="text">
        <li>news002</li><input type="text">
        <li>news003</li><input type="text">
    </ul>
  </div>
</template>

<script>
    export default {
        name: 'News',
        data(){
          return{
            opacity: 1,
          }
        }, 
        /* beforeDestroy(){
          console.log('News组件即将被销毁了');
          clearInterval(this.timer)
        },
        mounted(){
          this.timer = setInterval(() => {
            this.opacity -= 0.01
            if(this.opacity <= 0){
              this.opacity = 1
            }
          },16)
        }, */
        activated(){
          console.log('News组件被激活了');
          this.timer = setInterval(() => {
            console.log('计时器正在运行')
            this.opacity -= 0.01
            if(this.opacity <= 0){
              this.opacity = 1
            }
          },16)
        },
        deactivated(){
          console.log('News组件失活了');
          clearInterval(this.timer)
        }
    }
</script>

<style>

</style>